<template>
	<view class="list">
		<view class="item" v-for="item in data_list">
			<view class="item_view" @click="router(`/pages/cabinet/goods_deta?id=${item.id}`)">
				<image :src="item.product.img" class="img"></image>
				<view class="item_cell">
					<view class="item_info">
						<view class="info_view">
							<view class="name">{{item.product.name}}</view>
							<view class="stock">
								<view class="label">库存：{{item.stock}}瓶</view>
							</view>
						</view>
						<view class="code" @click.stop="preview(item.order_no)">
							<image src="@/static/images/code.png"></image>
						</view>
					</view>
					<view class="price">
						<view class="key">￥</view>
						<view class="value">{{item.price}}</view>
					</view>
				</view>
			</view>
			<view class="item_foot">
				<!-- <view class="btn_item" @click.stop="sell(item)">酒馆出售</view> -->
				<view class="btn_item" @click.stop="router(`/pages/cabinet/confirm_order?id=${item.id}`)">立即领取</view>
				<view class="btn_item" @click.stop="router(`/pages/cabinet/confirm_give?id=${item.id}`)">赠友</view>
			</view>
		</view>
		<uv-popup ref="popup" mode="bottom" round="10">
			<Sell :item="item" @close="reLoad" />
		</uv-popup>
		<uv-popup ref="codeRef" round="10">
			<view class="code_view">
				<uv-qrcode ref="qrcode" size="300px" :value="code_value"></uv-qrcode>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		underwriteCupboard
	} from "@/request/api";
	import Sell from "@/components/cabinet/Sell.vue";
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();
	import {
		ref,
		shallowRef
	} from "vue";
	const emit = defineEmits(["value"]);
	const props = defineProps({
		type: [String, Number]
	});

	const data_list = ref([]);
	const getList = async () => {
		let {
			list,
			all_number
		} = await underwriteCupboard({
			status: props.type
		});
		data_list.value = list;
		emit("value", all_number)
	};
	getList();

	const popup = shallowRef();
	const item = ref({});
	const sell = (value) => {
		item.value = value;
		popup.value.open();
	};
	const reLoad = () => {
		popup.value.close();
		setTimeout(() => {
			getList();
		}, 1500);
	};

	const code_value = ref("");
	const codeRef = shallowRef();
	const preview = (value) => {
		code_value.value = value;
		codeRef.value.open();
	};
</script>

<style scoped lang="scss">
	.list {
		padding: 0 25rpx;
		box-sizing: border-box;

		.item {
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.item_view {
				display: flex;
				padding: 20rpx 0rpx 30rpx;
				box-sizing: border-box;

				.img {
					width: 240rpx;
					height: 240rpx;
				}

				.item_cell {
					flex: 1;
					min-height: 240rpx;
					padding: 12rpx 0 12rpx 22rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item_info {
						display: flex;

						.info_view {
							flex: 1;

							.name {
								line-height: 36rpx;
								color: #333333;
								font-size: 26rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.stock {
								padding-top: 20rpx;
								box-sizing: border-box;
								display: flex;

								.label {
									height: 34rpx;
									color: #666666;
									font-size: 20rpx;
									border-radius: 3rpx;
									border: 1px solid #666666;
									padding: 0 14rpx;
									box-sizing: border-box;
									background: #FFFFFF;
									display: flex;
									align-items: center;
								}
							}
						}

						.code {
							image {
								width: 80rpx;
								height: 80rpx;
							}
						}
					}

					.price {
						color: #CA1C1D;
						display: flex;
						align-items: flex-end;

						.key {
							font-size: 28rpx;
							font-weight: bold;
						}

						.value {
							font-size: 40rpx;
						}
					}
				}
			}

			.item_foot {
				border-top: 1px solid #EEEEEE;
				padding: 30rpx 0rpx;
				box-sizing: border-box;
				display: flex;
				// justify-content: space-between;

				.btn_item {
					width: 180rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 10rpx;
					margin-right: 60rpx;

					&:nth-child(1) {
						background: #000000;
					}

					&:nth-child(2) {
						background: #CA1C1D;
					}

					&:nth-child(3) {
						color: #222222;
						background: #E4C412;
					}
				}
			}
		}
	}

	.code_view {
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>